<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>2016冬季新款韩版长款过膝韩国宽松纯色棉衣-蘑菇网-你的专业导购</title>
    <meta name="Keywords" content="换季,新品"/>
    <meta name="Description" content="换季"/>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
          name="viewport">
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <!-- Mobile Devices Support @end -->
    <link href="../css/index.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link href="../css/swiper.min.css" rel="stylesheet"/>
    <script src="../script/jquery-1.9.1.min.js"></script>
    <script src="../script/main.js"></script>
    <script src="../script/jquery.rotate.min.js"></script>
    <script src="../script/swiper.min.js"></script>
    <script src="../script/api.js"></script>
    <script src="../script/settings.js"></script>
    <script src="../script/vue.js"></script>
    <script src="../script/axios.js"></script>
    <style>
        .parameter-table .td {
            width: 49%;
            height: 40px;
            line-height: 40px;
            text-indent: 6px;
            float: left;
            color: #fff;
            font-size: 12px;
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
<div class="main" id="app">
    <!--头部-->
    <div class="header" id="bktop">
        <div class="logo"><a href=""><img :src="siteconfig.logo"/></a></div>
        <div class="banner">
            <div class="close"><img id="img1" src="../image/banner01.gif"/></div>
            <div class="open hide"><img id="img2" src="../image/banner02.gif"/></div>
            <ul class="xla">
                <li v-for="top in nav_list">
                    <a class="dianj dj1" href="javascript:;"><font>{{top.name}}</font><img id="ig1"
                                                                                           src="../image/xiala.gif"/></a>
                    <div class="zilan">
                        <a v-for="son in top.children_list" href="">{{son.name}}</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearBoth"></div>
    </div>  <!--产品信息-->
    <div class="newsban"><a style="color:#ccc" href="">首页</a> > <a style="color:#ccc" href="">换季新品</a> >{{goods.title}}
    </div>
    <div id="main">
        <div class="home-device">
            <a class="arrow-left" href="#"></a>
            <a class="arrow-right" href="#"></a>
            <div class="swiper-main">
                <div class="swiper-container swiper1">
                    <div class="swiper-wrapper">
                        <div v-for="image in goods_image" class="swiper-slide"><img :src="image.image_url" width="100%">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dian">
            <div class="pagination pagination1"></div>
        </div>
    </div>
    <div class="newbt2">{{goods.title}}</div>
    <div class="about">
        <div class="content2">
            <!-- start -->
            <div class="page-btn">
                <span class="swiper-pagination-active">商品详情</span>
                <span>商品参数</span>
                <span>同类热门</span>
            </div>
            <div class="swiper-container swiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide product-content">
                        <p class="image-list-title"><span>商品描述</span></p>
                        <p class="product-desc">{{goods.descript}}</p>
                        <p class="image-list-title"><span>穿着效果</span></p>
                        <div class="effect" v-html="goods.effect" style="color: #ccc;"></div>
                    </div>
                    <div class="swiper-slide product-param">
                        <div class="parameter-table">
                            <div class="tr">
                                <div class="td" v-for="value,key in goods.spu_attrs">{{key}}: {{value}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="case_list">
                            <div class="case_list_body case_list_body2 case_list_body3">
                                <ul>
                                    <li :key="key" v-for="goods,key in hot_goods" :class="key%2==0?'yyu':'casela'">
                                        <a href="">
                                            <div class="case_list_body_pic">
                                                <img :src="goods.image_url">
                                            </div>
                                        </a>
                                        <div class="case_list_info">
                                            <p class="cast_list_tit"><a href="product.html">{{goods.title}}</a></p>
                                        </div>
                                    </li>
                                    <div class="clearBoth"></div>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--底部-->
    <div class="bottom">
        <div class="bottom-top">
            <div class="linker">
                <div class="liuy">
                    <a href="">
                        <div class="tubiao"><img src="../image/liuy.gif"/></div>
                        <div class="wenzi">在线留言</div>
                        <div class="clearBoth"></div>
                    </a>
                </div>
                <div class="clearBoth"></div>
            </div>
        </div>
        <div class="bottom-bot">{{siteconfig.copyright}}</div>
    </div>
</div>
<script>
    apiready = function () {
        vm = new Vue({
            el: "#app",
            data: {
                id: 1,
                siteconfig: {},     // 站点配置
                nav_list: [         // 导航菜单
                    {children_list: []},
                    {children_list: []},
                    {children_list: []},
                ],
                goods: { // 商品基本信息
                    spu_attrs: {}
                },
                goods_image: [], // 商品图片
                hot_goods: [],
            },
            created() {
                this.get_site_config();
                this.get_nav_list();
                this.get_detail_goods();
                this.get_goods_image();

            },
            methods: {
                // 站点配置
                get_site_config() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "id": 188,
                        "method": "common.siteconfig",
                        "params": {}
                    }).then(response => {
                        this.siteconfig = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 获取导航菜单
                get_nav_list() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "method": "common.nav",
                        "params": {},
                        "id": 1
                    }).then(response => {
                        this.nav_list = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 根据ID获取商品信息
                get_detail_goods() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "id": 188,
                        "method": "goods.detail_goods",
                        "params": {id: this.id}
                    }).then(response => {
                        this.goods = response.data.result;
                        this.get_hot_goods(this.goods.category_id)
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 获取商品图片
                get_goods_image() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "id": 188,
                        "method": "goods.detail_goods_image",
                        "params": {id: this.id}
                    }).then(response => {
                        this.goods_image = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 同类热门
                get_hot_goods(category) {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "id": 188,
                        "method": "goods.hot_goods",
                        "params": {category: category, limit: 4}
                    }).then(response => {
                        this.hot_goods = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                }
            }
        });

        // 商品图片
        var swiper = new Swiper('.swiper1', {
            pagination: '.pagination1',
            loop: true,
            paginationClickable: true,
            autoplay: 5000,
            grabCursor: true,
            autoHeight: true,
        });

        // 商品详情
        var swiper2 = new Swiper('.swiper2', {
            autoHeight: true,
            onSlideChangeStart: function (swiper) {
                $('.page-btn span').eq(swiper.activeIndex).addClass('swiper-pagination-active').siblings().removeClass('swiper-pagination-active');
            }
        });

        // 按钮设置
        $('.page-btn span').click(function () {
            $(this).addClass('swiper-pagination-active').siblings().removeClass('swiper-pagination-active');
            swiper2.slideTo($(this).index(), 500, false);
        });
    }

</script>
</body>
</html>